<template>
    <div >
        <div class="pinlunindexheader"  >
            <div style="display:flex;align-items:center;">
                <img src="~/static/guangchang/left@6x.png" alt="" style="width: 2.75rem;height:2.75rem;" @click="goBack()">
                <div style="display:flex;align-items:center;">
                    <img :src="datalist2.face" alt="" style="width:2rem;height:2rem;border-radius:1.25rem;">
                    <div style="margin-left:12px">
                        <div style="font-size: .75rem;color: #17181A;font-weight: bold;">{{datalist2.pet_name}}</div>
                        <div style="display:flex;align-items:center;color: #AEB0B3;font-size: 10px;">
                            <div>{{datalist2.time}}</div>
                            <div>·</div>
                            <div>{{datalist2.look}}浏览</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <img src="~/static/guangchang/more@2x.png" alt="" style="width:2rem;height:2rem"> -->
        </div>
        <van-swipe :autoplay="3000" @change="onChange"  style="">
            <van-swipe-item v-for="(item, index) in  datalist2.img" :key="index" >
                <img :src="item" style="width: 100%;height:210px;object-fit: cover;" />
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/ <span style="color:#80827D">{{ datalist2.img?.length}}</span></div>
            </template>
        </van-swipe>
        <div class="truncate" v-html="datalist2.content"  @click="getfils(datalist2.games[0].gid)"></div>
        <div style="display:flex;justify-content:center;width:100%;">
            <div
                style="display:flex;align-items:center;margin-top:8xp;justify-content:space-between;justify-content:center;">
                <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                    <img src="~/static/guangchang/8@3x.png" alt="" style="width: 2.75rem;height:2.75rem;">
                    <div style="color: #7B7D80;font-size: .625rem;">浏览</div>
                </div>
                <!-- <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                    <img src="~/static/guangchang/share@2x.png" alt="" style="width: 2.75rem;height:2.75rem;">
                    <div style="color: #7B7D80;font-size: .625rem;font-weight: bold;">分享</div>
                </div> -->
                <!-- <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                    <img src="~/static/guangchang/6@2x.png" alt="" style="width: 2.75rem;height:2.75rem;">
                    <div style="color: #7B7D80;font-size: .625rem;font-weight: bold;">评论</div>
                </div> -->
                <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;"
                    @click="godianzan(datalist2.id)">
                    <img v-if="zantype ==false" src="~/static/guangchang/8@2x.png" alt=""
                        style="width: 2.75rem;height:2.75rem">
                    <img v-if="zantype== true" src="~/static/guangchang/heart@2x.png" alt=""
                        style="width: 2.75rem;height:2.75rem">
                    <div style="color: #7B7D80;font-size: .625rem;font-weight: bold;">点赞</div>
                </div>
            </div>
        </div>
        <div style="margin:0 .75rem" @click="filse=true">
            <div style="color: #AEB0B3;font-size: .625rem;">共计{{datalist1.data?.length}}条评论</div>
            <van-list v-model="loading" :finished="finished" finished-text="" @load="onLoad">
                <van-cell v-for="(item,index) in datalist1.data" :key="index"
                    style="margin:1.375rem 0;border-radius:.75rem;" >
                    <div style="background-color: #ffffff;border-radius:.75rem;">
                        <div style="display: flex;">
                            <img :src="item.face" alt="" style="width:2.5rem;height:2.5rem;border-radius:50%;">
                            <div style="margin-left:.75rem;">
                                <div style="display:flex;align-items:center;">
                                    <div style="font-size:.75rem;color: #17181A;font-weight: bold;">{{item.pet_name}}</div>
                                    <img src="~/static/guangchang/userbadge.png" alt=""
                                        style="width:2.575rem;height: .75rem;margin-left:.25rem;">
                                </div>
                                <div style="font-size: .6875rem;color: #AEB0B3;line-height:0;margin-top:.375rem;">
                                    {{item.time}}</div>
                                <div class="truncate" v-html="item.content" @click="handleContentClick($event, item.games)">
                                </div>
    
                                <div class="image-gallery">
                                    <img @click="showImage(img)" v-for="(img, idx) in item.img" :key="idx" :src="img"
                                        :alt="'Image ' + (idx + 1)" :style="getImageStyle(item.img.length)"
                                        :class="getImageClass(idx, item.img.length)" />
                                </div>
                            </div>
                            <!--  -->
                            <!-- <div class="guanzhu">+&nbsp;关注</div> -->
                        </div>
                      <div style="display:flex;align-items:center;margin-top:.5rem;justify-content:space-between;">
                    <div></div>
                    <div style="display:flex;align-items:center;font-size: .625rem;font-weight: 500;color: #7B7D80;">
                        <div>{{item.zan}}点赞</div>
                        <img v-if="item.is_zan==0"  @click.stop="gozan(item.id)" src="~/static/zixun/xzax1.png" alt=""
                            style="width:1rem;height:1rem;margin-left:.875rem">
                        <img  v-if="item.is_zan==1" @click.stop="gozan(item.id)" src="~/static/zixun/xzax.png" alt=""
                            style="width:1rem;height:1rem;margin-left:.75rem">
                    </div>
                </div>
                    </div>
                </van-cell>
            </van-list>
            <div v-if="datalist1.data?.length==0"  style="display: flex;">
         <div style="margin:50%  auto;display: flex;flex-direction: column;align-items: center;justify-content: center;"> 
        <img src="https://static-tool.77.top/static/null-image.png" alt=""  style="width:180px;height:180px;"     >
        <div style="color: #2E3033;font-weight: bold;margin-top: 15px;">暂无评论消息哦~</div>
      </div>
        </div>


        </div>
             <div class="dibutab">
            <div>
                <van-field v-model="value" @focus="focus" placeholder="写点什么..."
                    style="width:247px;border-radius:1.0625rem;background-color:#7B7D8014;height:34px;line-height:0.875rem;" />
            </div>
            <div v-if="filse" style="display:flex;align-items:center;justify-content:space-between;">
                <!-- <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;"  @click="shareContent">
                 <img src="~/static/guangchang/more@2x.png" alt="" style="width:1.5rem;height:1.5rem">
                 <div style="font-size: .625rem;font-weight: 500;margin-top:.1875rem">分享</div>
              </div> -->
                <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin:0 1.5625rem"
                    @click="filse=false">
                    <img v-if="pinglntype" src="~/static/guangchang/basicicon@.png" alt="" style="width:1.5rem;height:1.5rem">
                    <img v-if="pinglntype==false" src="~/static/guangchang/more@2x.png" alt="" style="width:1.5rem;height:1.5rem">
                    <div style="font-size: .625rem;font-weight: 500;margin-top:.1875rem">评论</div>
                </div>
                <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin-right:1.25rem"
                     @click="godianzan(datalist2.id)">
                    <img v-if="zantype==false" src="~/static/guangchang/basicicon@2x.png" alt="" style="width:1.5rem;height:1.5rem">
                    <img v-if="zantype" src="~/static/zixun/xzax.png" alt="" style="width:1.5rem;height:1.5rem">
                    <div style="font-size: .625rem;font-weight: 500;margin-top:.1875rem">点赞</div>
                </div>
            </div>
            <div v-if="filse==false"  @click="gopingluns">
                <img v-if="value!=''" src="~/static/zixun/normal@2x.png" alt="" style="width:2.75rem;height:1.9375rem;">
                <img v-if="value==''" src="~/static/zixun/forbid@2x.png" alt="" style="width:2.75rem;height:1.9375rem;">
            </div>
        </div>
    </div>
</template>

<script>
import md5 from 'js-md5';
export default {
  data() {
    return {
      textToHash: '',
      t: "",
      uid: '',
      id: '',
      datalist1: '',
      datalist2: '',
      current: 0,
      imges: ['https://img01.yzcdn.cn/vant/apple-1.jpg', 'https://img01.yzcdn.cn/vant/apple-2.jpg', 'https://img01.yzcdn.cn/vant/apple-3.jpg'],
      zantype: false,
        loading: false,
      finished: false,
      page:1,
      filse: true,
         pinglntype: true,
         value: '',
      
    }
  },
  async asyncData({ $axios, route }) {
  },
  async mounted() {
    this.id = this.$route.query.id;
    this.uid = this.getCookie('loginnew');
    this.t = Date.now();
    const sign = `${this.uid}${this.t}fsd213ewdsadqwe2121213edsad`;
    this.textToHash = md5(sign);
    const params = {
      ct: 'dongtai',
      ac: 'pinglun',
      sign: this.textToHash,
      t: this.t,
      uid: this.uid,
      id: this.id,
      p: 1
    };
    const params2 = {
      ct: 'dongtai',
      ac: 'info',
      id: this.id,
      is_look: '',
      sign: this.textToHash,
      t: this.t,
      uid: this.uid,
    };
    const [response1, response2] = await Promise.all([
      this.$axios.get('api/app/v3', { params: params }),
      this.$axios.get('api/app/v3', { params: params2 }),
    ]);
    if (response2.data.data.is_zan == 1) {
      this.zantype = true;
    }
    this.datalist1 = response1.data
    this.datalist2 = response2.data.data
    this.datalist2.content = this.formatContent( this.datalist2.content); // 只处理 content 字段
      this.finished = true;
  },
  methods: {
      async   gozan(e){
          const params = {
        ct: 'dongtai',
        ac: 'zan',
        type: 1,
        id: e,
        sign: this.textToHash,
        t: this.t,
        uid: this.uid
      };
      const response = await this.$axios.get('api/app/v3', { params });
      this.getYouxiTabs()
  },
  formatContent(content) {
  let tempContent = content.replace(/\[图片\]([^\s]*)/g, (match, p1) => {
    return `{{img:${p1}}}`;
  });
  // tempContent = tempContent.replace(/#([^\n]*)/g, (match, p2) => {
  //   return `<span style="color: #FF5733; class="dynamicsss-span"">#${p2.trim()}</span>`;
  // });

  const finalContent = tempContent.replace(/\{\{img:([^\s]*)\}\}/g, (match, p1) => {
    return `<img src="https://www.77.top/static/gametag.png" alt="icon" class="icon" style="width: 1.25rem;height: 1.25rem;display: inline-block;  vertical-align: middle;" /> <span class="dynamic-span" style="color: #3D9399FF;font-weight: bold;" >${p1}</span>`;
  });

  return finalContent;
},
         onLoad() {
      setTimeout(() => {
        if (this.page <= this.datalist1.max_p) {
          this.page++;
          this.getYouxiTabs();
        } else {
          this.finished = true;
        }
      }, 500);
    },

      focus() {
      this.filse = false
    },
    async getYouxiTabs() {
     const params = {
      ct: 'dongtai',
      ac: 'pinglun',
      sign: this.textToHash,
      t: this.t,
      uid: this.uid,
      id: this.id,
      p: this.page
    };
     const response = await this.$axios.get('api/app/v3', { params });
            if (this.page == 1) {
        this.datalist1 = response.data;
      } else {
        this.datalist1.data = this.datalist1.data.concat(response.data.data);
      }
    },
    handleContentClick(event, e) {
      const target = event.target;

      if (target.classList.contains('dynamic-span')) {
        const textContent = target.textContent;

        // 查找对应的 gid
        const item = e.find(item => item.name === textContent);
        if (item) {
          const gid = item.gid;
          this.getfils(gid);
        }
      }
    },
        async gopingluns() {
      const params = {
        ct: 'dongtai',
        ac: 'pinglun_add',
        dongtai_id: this.id,
        t: this.t,
        uid: this.uid,
        content: this.value,
         sign: this.textToHash,
      };
      const response = await this.$axios.get('api/app/v3', { params });
      this.page=1
      this.getYouxiTabs()
    },
    async godianzan(e) {
      const params = {
        ct: 'dongtai',
        ac: 'zan',
        type: 0,
        id: e,
        sign: this.textToHash,
        t: this.t,
        uid: this.uid
      };
      const response = await this.$axios.get('api/app/v3', { params });
      this.zantype = !this.zantype
    },
    onChange(index) {
      this.current = index;
    },
    goBack() {
      this.$router.go(-1);
    },
    getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
      return '';
    },
    getfils(gid) {
      this.$router.push({
        path: `/shouyou/${gid}.html`,
        query: { id: gid }
      });
    },
   shareContent(){

	}
  }
}
</script>
<style scoped>
.pinlunindexheader {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.custom-indicator {
    position: absolute;
    right: 44%;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    color: #fff;
    padding: 2px 12px;
    border-radius: .75rem;
    background: rgba(0, 0, 0, 0.1);
}

.truncate {
    margin: 12px;
    text-align: left;
    overflow: hidden;
}
.dibutab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    height: 2rem;
    width: 100%;
    padding: .75rem;
    background-color: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
</style>